<!-- 全部课程 -->
<template>
	<view class="uni-cont">
		<view class="warp">
			<!-- <uni-section class="mb-10" title="全部课程" type="line">
				<template v-slot:right>
					<span style="font-size: 14px;color: #9c9c9c;" @click="courseAll()">全部>></span>
				</template>
			</uni-section> -->
			<uni-grid :column="2" :square="false" :highlight="false" :showBorder="false">
				<uni-grid-item v-for="(item, index) in courseList" :key="index" style="border-radius: 50%;">
					<view @click="toCourseDetail(item.id)" class="grid-item-box">
						<!-- //数组循环出图片 -->
						<!-- <image :src="item.url" class="image" mode="aspectFill"/> -->
						<!-- 写死图片 -->
						<image src="../../static/img/1.png" class="image" mode="aspectFill"></image>
						<text class="text">{{ item.name }}</text>
						<text
							style="color: #868b95;font-size: 14px;margin: 2px 0;">主讲人:{{item.schoolTeacher.name}}</text>
						<text style="color: #868b95;font-size: 14px;">{{ dateFormat(item.createTime)}}</text>
						<!-- <text class="text">{{ item.type }}</text> -->
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				nuber: 6, //设置课程默认加载长度
				courseList: [], //用于存放课程
				pageSize: 12 //分页查询条数
			}
		},
		methods: {
			// 发起请求,获取课程
			async courseData() {
				const res = await this.$myRequest({
					url: '/api/mobile/schoolcourse/query',
					data: {
						pageSize: this.pageSize
					}
				})
				if (res.success) {
					this.courseList = res.data.data
					// console.log(this.courseList);
				} else {
					uni.showToast({
						title: "网络出错"
					})
				}
				// uni.request({
				// 	url: 'http://120.79.0.124:8071/api/mobile/schoolcourse/all',
				// 	method: "GET",
				// 	success: res => {
				// 		// console.log(res.data.data.data);
				// 		this.courseList = res.data.data
				// 		// console.log(this.courseList);
				// 		// console.log(res.data.data);
				// 	},
				// 	fail: () => {
				// 		// console.log('请求失败');
				// 	},
				// 	complete: () => {
				// 		// console.log('请求完成');
				// 	},

				// })
			},
			courseAll() { //全部课程
				this.nuber = this.courseList.length
				// console.log("courseList.length是"+this.nuber);
			},
			// 加载更多
			More() {
				this.pageSize = this.pageSize + 4; //每次加四条
			},
			//带上课程id 去课程资源 sz
			toCourseDetail(id) {
				console.log("课程id sz:" + id)
				uni.navigateTo({
					url: "../courseDetail/courseDetail?id=" + id
				})
			},
			// 时间格式化
			dateFormat(time) {
				let date = new Date(time);
				let year = date.getFullYear();
				// 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
				let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				// 拼接
				// return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
				return year + "-" + month + "-" + day;
			},
		},
		created() {
			this.courseData(); //在实例创建完成后立即调用
		},
		onReachBottom() {
			// console.log(this.pageSize)
			this.pageSize = this.pageSize + 4;
			this.courseData();
		},
	}
</script>

<style>
	uni-page-body {
		/* background-color: #e0e9fa; */
		padding-bottom: 10px
	}

	.uni-cont {
		background-color: #e0e9fa;
		padding: 0 20px;
	}

	.uni-section-header {
		background-color: #e0e9fa;
		padding-top: 20px;
	}

	.uni-page {
		background-color: #e0e9fa;
	}

	.uni-section {
		background-color: #e0e9fa;
	}

	.image {
		width: 100%;
		height: 110px;
		border: .1px solid #d4d4d4;
		border-radius: 10px 10px 0 0;
		/* border-bottom-right-radius */
		/* border: bottom left radius 0px; */
		/* border: bottom right radius 0px; */
		/* border: top left radius 10px; */
	}

	.text {
		font-size: 15px;
		margin-top: 5px;
		font-weight: bolder;
		/* padding: 5px; */
		color: #414141;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		// display: block;
		/* #endif */
	}

	.grid-dynamic-box {
		margin-bottom: 15px;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		padding: 0 0 15px 0;
		background-color: #fff;
		margin: 8px 10px;
		border-radius: 10px;
		box-shadow: 4px 4px 2px rgba(212, 212, 212, 0.9);
		border: .1px solid #d4d4d4;
	}

	.grid-item-box-row {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-dot {
		position: absolute;
		top: 5px;
		right: 15px;
	}

	.swiper {
		height: 420px;
	}

	/* #ifdef H5 */
	@media screen and (min-width: 768px) and (max-width: 1425px) {
		.swiper {
			height: 630px;
		}
	}

	@media screen and (min-width: 1425px) {
		.swiper {
			height: 830px;
		}
	}

	/* #endif */
</style>
